<template lang="html">
  <div class="theme">
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide v-for="m in themedata"><a><img :data-src="m.srcmap"  class="swiper-lazy" alt=""></a></swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { swiper, swiperSlide} from 'vue-awesome-swiper'

export default {
  name: 'theme',
  data() {
    return{
      themedata:[{
          srcmap: '../../../static/image/theme1.jpg'
        },{
          srcmap: '../../../static/image/theme2.jpg'
        },{
          srcmap: '../../../static/image/theme3.jpg'
        },{
          srcmap: '../../../static/image/theme1.jpg'
        },{
          srcmap: '../../../static/image/theme2.jpg'
        },{
        srcmap: '../../../static/image/theme3.jpg'
        },{
          srcmap: '../../../static/image/theme1.jpg'
        },{
          srcmap: '../../../static/image/theme2.jpg'
        },{
          srcmap: '../../../static/image/theme3.jpg'
        }
      ],
        swiperOption: {
          slidesPerView: 'auto',//则自动根据slides的宽度来设定数量
          slidesOffsetBefore: 15,//设定slide与左边框的预设偏移量
          slidesOffsetAfter: 12,//设定slide与右边框的预设偏移量
          setWrapperSize: true,//开启这个设定会在Wrapper上添加等于slides相加的宽高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
          freeMode : true,//设置为true则变为free模式，slide会根据惯性滑动且不会贴合
          spaceBetween: 8,//swiper 间距
          paginationClickable: true,//点击分页器的指示点分页器会控制Swiper切换
          lazyLoading : true,//开启图片延迟加载
          lazyLoadingInPrevNext : true,//延迟加载应用到最接近的slide的图片（前一个和后一个slide）
          lazyLoadingInPrevNextAmount : 6//加载张数
        }
    }
  },components: {
    swiperSlide
  }, comout: {
    swiper() {
      return this.$refs.mySwiper.swiper
    }
  }
}
</script>

<style lang="stylus">
.theme{
  .swiper-container {
      width: 100%;
  }
  .swiper-container {
      margin-left: auto;
      margin-right: auto;
      position: relative;
      overflow: hidden;
      z-index: 1;
  }
  .swiper-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 1;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-transition-property: -webkit-transform;
      -moz-transition-property: -moz-transform;
      -o-transition-property: -o-transform;
      -ms-transition-property: -ms-transform;
      transition-property: transform;
      -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
      box-sizing: content-box;
  }
  .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;


  }
  .swiper-slide {
      -webkit-flex-shrink: 0;
      -ms-flex: 0 0 auto;
      flex-shrink: 0;
      width: 70px;
      height: 70px;
      position: relative;

      a{
        font-size: 0px;
      }

      img{
        width: 100%;
      }
  }
}

</style>
